<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib prefix="tag" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>

<div id="friends_page_wrapper">
	<div id="friends_tabs">
		<ul>
			<li><a href="#friends">Potwierdzeni znajomi</a></li>
			<li><a href="#friends-finder">Wyszukiwarka znajomych</a></li>
		</ul>
	
		<div id="friends">
			<h2><spring:message code="friends.label"/>:</h2>
			<c:choose>
				<c:when test="${empty friends }">
					<spring:message code="friends.label.nofriends"/>
				</c:when>
				<c:otherwise>
					<c:forEach var="user" items="${friends }">
				
					<div class="friend_search_result">
						<h3><c:out value="${user.username }"></c:out></h3>
						<div class="avatar">
							<a href="#/user/<c:out value="${user.username }"></c:out>">
								<img src="/resources/css/img/default-avatar.png" alt="avatar" />
							</a>
						</div>
						<p><b><spring:message code="friends.label.username"/>:</b> <c:out value="${user.username }"></c:out> </p>
						<p><b><spring:message code="friends.label.firstname"/>:</b> <c:out value="${user.userAdditionalInformations.firstName }"></c:out> </p>
					</div>
					</c:forEach>
				</c:otherwise>
			</c:choose>
			
			
		</div>
		<div id="friends-finder">
		
		<h3>Wyszukiwanie znajomych:</h3>
			
		<form id="search_friends" action='<spring:url value="/friends/search"></spring:url>'>
			<fieldset>
				<ul>
				<li>
				<label for="friend_firstname" class="label">Imię</label>
				<div class="inputWrapper"><div class="cap">
				<input id="friend_firstname" type="text" name="firstname">
				</div></div><div class="clear"></div>
				</li>
				<li>
				<label for="friend_lastname" class="label">Nazwisko</label>
				<div class="inputWrapper"><div class="cap">
				<input id="friend_lastname" type="text" name="lastname">
				</div></div><div class="clear"></div>
				</li>
				<li>
				<label for="friend_username" class="label">Nazwa konta</label>
				<div class="inputWrapper"><div class="cap">
				<input id="friend_username" type="text" name="username">
				</div></div><div class="clear"></div>
				</li>
				<li>
				<button class="btn" type="submit">
					<div><span>Szukaj</span></div>
				</button> 
				</li>
				</ul>
				<div class="clear"></div>
			</fieldset>
		</form>
		<div id="friends_search_results"></div>
		</div>
	</div>
</div>

<script type="text/javascript">
	$("#search_friends").submit(function(){
		var data = $(this).serialize();
		DynamicContentLoader.loadContent($(this).attr("action"), "#friends_search_results", data);
		return false;
	});
	$( "#friends_tabs" ).tabs();
</script>